﻿@import "defaults/_defaults.scss";
//@import "../../../UsersAPI/UsersAPI/HTTPRoot/template.scss" as UsersAPI with ( $black: #222, $border-radius: 0.1rem );
//@import "../../../OpenChargingCloudAPI/OpenChargingCloudAPI/HTTPRoot/template.scss";


body {

    margin:                 0px;
    font-family:            "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow:               hidden;

    #page {

        display:                flex;
        flex-direction:         column;

        #top {

            display:                flex;
            width:                  100%;
            height:                 $TopbarHeight;
            background-color:       $NavigationBackground;
            z-index:                100;
            box-shadow:             2px 0 16px 0 rgba(0,0,0,.3);

            #topLeft {
                min-width:                  20vw;
                padding:                    0 0 0 2vw;
                line-height:                $TopbarHeight;
                color:                      #d8dee3;
                font-weight:                bold;
                font-size:                  110%;
                user-select:                none;
            }

            #topRight {

                display:                    flex;
                flex-direction:             row;
                justify-content:            flex-end;
                align-items:                center;
                width:                      100%;
                font-size:                  85%;
                padding-right:              20px;

                a {

                    padding:                0px 10px;
                    margin:                 3px;
                    text-decoration:        none;

                    i {
                        color:              $NavigationTextColor;
                        font-size:          140%;
                        display:            inline-block;
                        font-style:         normal;
                    }

                    #mt {
                        position:           relative;
                        background-color:   rgba(170, 0, 0, 0.7);
                        color:              #ffffff;
                        top:                -13px;
                        display:            inline-block;
                        border-radius:      4px;
                        padding:            0px 7px;
                        margin-left:        -10px;
                        margin-top:         28px;
                        text-align:         center;
                        font-size:          60%;
                        font-weight:        bold;
                        height:             17px;
                        line-height:        17px;
                    }

                }

                a:hover {
                    i {
                        color:              #e3ecfa;
                    }
                }

                #internal {

                    display:                none;

                    #userFrame {

                        display:                inline-block;
                        background-color:       rgba(255, 255, 255, 0.07);
                        padding:                10px 15px;
                        border-radius:          6px;

                        #username {
                            color:              $NavigationTextColor;
                            padding-right:      10px;
                            display:            inline-block;
                        }

                        #userIcon {

                            display:            inline-block;

                            i {
                                font-size:      140%;
                            }

                        }

                    }

                    #userFrame:hover {
                        background-color:       rgba(255, 255, 255, 0.21);
                    }

                    #astronautFrame {

                        display:                none;
                        background-color:       rgba(255, 255, 255, 0.07);
                        padding:                10px 15px;
                        border-radius:          6px;

                        #astronaut {
                            color:              $NavigationTextColor;
                            padding-right:      10px;
                            display:            inline-block;
                        }

                        #astronautIcon {

                            display:            inline-block;

                            i {
                                font-size:      140%;
                            }

                        }

                    }

                    #astronautFrame:hover {
                        background-color:       rgba(255, 255, 255, 0.21);
                    }

                    #admin {
                        display:                none;
                    }

                    #signout {
                        padding-right:          1px;
                    }

                }

                #signin {
                    padding-right:          1px;
                }

            }

        }

        #bottom {

            display:            flex;

            #navigation {

                display:                flex;
                display:                none;
                flex-direction:         column;
                z-index:                100;
                height:                 calc(100vh - #{$TopbarHeight});
                padding-top:            1vh;
                background-color:       $NavigationBackground;
                box-shadow:             2px 16px 16px 0 rgba(0, 0, 0, 0.3);

                #topMenu {
                    margin-top:         3vh;
                }

                .menu {
                    display:            block;
                    color:              $NavigationMenuColor;
                    padding:            15px 0px 10px 12px;
                    font-size:          95%;
                }

                .submenu {
                    display:            none;
                }

                #bottomMenu {
                    flex-grow:          1;
                    display:            flex;
                    flex-direction:     column;
                    justify-content:    flex-end;
                    padding-bottom:     3vh;
                }

                a.menulink {

                    display:            block;
                    position:           relative;
                    color:              $NavigationTextColor;
                    padding:            0.7vh .55em 0.7vh .3em;
                    border-left:        0.25em solid transparent;
                    font-weight:        normal;
                    /*line-height:        40px;*/
                    text-decoration:    none;
                    white-space:        nowrap;
                    user-select:        none;
                    text-align:         center;

                    i {
                        display:        inline-block;
                        font-size:      100%;
                        width:          44px;
                        font-style:     normal;
                    }

                    .iconText {
                        font-size:      50%;
                    }

                }

                a.menulink:hover {
                    color:              $NavigationTextHover;
                    background-color:   $NavigationBackHover;
                }

                .arrow {
                    display:            none;
                    border-top:         20px solid transparent;
                    border-bottom:      20px solid transparent;
                    border-left:        20px solid #ff88267d;
                    position:           absolute;
                    height:             0px;
                    top:                0;
                    right:              -20px;
                }

                @media only screen and (max-width: 512px) {
                    padding-right:      0px;
                }

            }

            #right {

                position: relative;
                width:    100%;
                height:                 calc(100vh - #{$TopbarHeight});
                z-index:  9;

                .subnavigation {
                    display:                none;
                    position:               absolute;
                    top:                    0px;
                    left:                   0px;
                    width:                  10vw;
                    background-color:       #b2bed2;
                    box-shadow:             2px 0 16px 0 rgba(0,0,0,.3);
                    z-index:                8;
                }

                #text {

                    position:               absolute;
                    top:                    0px;
                    left:                   0px;
                    background-color:       lightgrey;
                    overflow-y:             auto;
                    z-index:                7;

                    /*@media only screen and (max-width: 512px) {
                        padding-right:      10px;
                    }*/

                    min-width:                      100%;
                    min-height:                     100%;
                    margin:                         0px;
                    padding:                        0;
                    background-color:               #eee;

                    .headline {

                        #headline {

                            display:                flex;
                            align-items:            center;
                            padding:                1vh 0px 2vh 0px;
                            color:                  #999;

                            #logo {

                                margin-right:       1vw;

                                img {
                                    width:              100px;
                                }

                            }

                            #title {

                                font-size:              180%;

                                #id {
                                    display:                inline-block;
                                }

                                #name {

                                    font-size:              50%;
                                    display:                inline-block;

                                    #language {
                                        display:            inline-block;
                                        margin-top:         2px;
                                        font-size:          60%;
                                        vertical-align:     top;
                                        background-color:   #ddd;
                                        padding:            2px 4px;
                                        border-radius:      4px;
                                    }

                                    #I18NText {
                                        display:            inline-block;
                                        font-size:          170%;
                                    }

                                }

                                #description {

                                    font-size:              30%;

                                    #language {
                                        display:            inline-block;
                                        margin-top:         2px;
                                        font-size:          60%;
                                        vertical-align:     top;
                                        background-color:   #ddd;
                                        padding:            2px 4px;
                                        border-radius:      4px;
                                    }

                                    #I18NText {
                                        display:            inline-block;
                                        font-size:          170%;
                                    }

                                }

                            }

                        }

                    }

                    .entity {

                        display:                flex;
                        flex-direction:         column;
                        padding:                1vh 1vw;

                        #about {
                            color:                  #333;
                            padding:                1vh 0vh 2vh 1vh;
                        }

                        .upperButtons
                        {

                            display:            flex;
                            flex-direction:     row-reverse;
                            margin:             1vh 1vw;

                            /* Also used for 'a'-tags which should behave like a button! */

                            .button {

                                background:                 rgb(214, 214, 214);
                                background-image:           linear-gradient(to bottom, #ddd, #c8c8c8);
                                color:                      #696969;
                                padding:                    6px 10px 4px 10px;
                                margin-left:                5px;
                                border-radius:              3px;
                                border:                     0px;
                                box-shadow:                 2px 2px 3px #bebebe;
                                font-size:                  60%;
                                white-space:                nowrap;
                                text-decoration:            none;

                                .text {

                                    display:            inline-block;

                                    .text2 {
                                        display:            inline-block;
                                        padding-left:       8px;
                                        vertical-align:     top;
                                        padding-top:        7px;
                                    }

                                }

                            }

                            .button:hover {
                                background-color:           rgbgb(224, 224, 224);
                                background-image:           linear-gradient(to bottom, #eee, #d4d4d4);
                                color:                      #777;
                            }

    /*                        button i:first-child {
                                margin-right:       2px;
                                font-size:          75%;
                            }*/

                            .button:active {
                                box-shadow:                 0 1px 2px #999;
                                transform:                  translateY(4px);
                            }

                            .button:focus {
                                outline:                    0px;
                            }

                            .button:disabled {
                                background-color:           rgba(0, 0, 0, 0.1);
                                background-image:           none;
                                color:                      #bbb;
                                box-shadow:                 none;
                            }

                        }

                        #data {

                            margin-left:                15px;
                            width:                      calc(100% - 15px);
                            display:                    table;
                            border-collapse:            collapse;

                            .row {

                                display:                table-row;
                                width:                  100%;

                                @mixin _key {
                                    display:            table-cell;
                                    padding:            8px 42px 8px 0;
                                    white-space:        nowrap;
                                    color:              #666;
                                    vertical-align:     top;
                                }

                                .key {
                                    @include _key;
                                }

                                .subkey {
                                    @include _key;
                                    padding-left:       20px;
                                }

                                .value {

                                    display:                table-cell;
                                    position:               relative;
                                    width:                  inherit;

                                    display:                table-cell;
                                    width:                  inherit;
                                    color:                  #777;
                                    padding-top:            5px;

                                    input, textarea, select {
                                        background-color:   rgba(255, 255, 255, 0.7);
                                        padding:            6px 8px;
                                        border-radius:      4px;
                                        font-size:          90%;
                                        border:             0px;
                                        width:              100%;
                                    }

                                    input, textarea {
                                        width:              calc(100% - 16px);
                                    }

                                    textarea {
                                        /*background-color:   rgba(255, 255, 255, 0.7);
                                        width:              calc(100% - 16px);
                                        padding:            6px 8px;
                                        border:             0px;
                                        border-radius:      4px;
                                        color:              #777;
                                        font-size:          100%;*/
                                        vertical-align:     top;
                                        resize:             vertical;
                                        min-height:         100px;
                                       /* display:            block;*/
                                    }

                                    select {
                                        margin-bottom:      1px;
                                    }

                                    input[type=checkbox] {
                                        /*width:              30px;
                                        height:             18px;
                                        margin-top:         8px;*/
                                        margin:             14px 11px 7px 11px;
                                        width:              auto;
                                        transform:          scale(1.2);
                                    }

                                    input[type=checkbox]:checked {
                                        color:              $NavigationBackground;
                                    }

                                    input:focus, textarea:focus {
                                        outline-color:      #bdcee9;
                                        border-color:       #456ca7;
                                        box-shadow:         0 0 6px #a3b9db;
                                        background:         #d7e1f0;
                                    }

                                    input::placeholder {
                                        font-size:          95%;
                                        font-style:         italic;
                                        color:              rgb(154, 154, 154);
                                        opacity:            1;      /* Firefox fix */
                                    }

                                    input.error {
                                        display:            inline-block;
                                        background-color:   rgba(200, 0, 0, 0.23) !important;
                                        color:              rgb(200,0,0)          !important;
                                    }

                                    .subvalues {

                                        .subrow {

                                            display:            table-row;

                                            .subkey {
                                                display:        table-cell;
                                                white-space:    nowrap;
                                            }

                                            .subvalue {
                                                display:        table-cell;
                                                width:          100%;
                                                padding:        5px 0px 0px 20px;
                                            }

                                        }

                                    }


                                    #language {
                                        width:              100%;
                                        margin-bottom:      1px;
                                    }

                                    a {
                                        background-color:   rgba(255, 114, 0, .25);
                                        color:              $NavigationBackground;
                                        padding:            2px 6px;
                                        border-radius:      3px;
                                        text-decoration:    none;
                                    }

                                    a:hover {
                                        background-color:   rgba(228, 141, 70, 0.25);
                                        color:              #f59f5a;
                                    }

                                }

                                .validationError {
                                    position:       absolute;
                                    right:          12px;
                                    top:            2px;
                                    height:         100%;
                                    align-items:    center;
                                    font-size:      70%;
                                    color:          #c80000;
                                }

                            }

                            .group  {
                                white-space:            nowrap;
                                color:                  #666;
                                vertical-align:         top;
                                margin:                 15px 0px 1px 0px;
                            }

                            .separator {
                                margin-top:             10px;
                            }

                        }

                        .lowerButtons {

                            display:            flex;
                            flex-direction:     row;
                            margin:             2vh 0;

                            /* Also used for 'a'-tags which should behave like a button! */
                            button, .button {

                                padding:                    .5vh 1.2vh;
                                background-color:           #456ca7;
                                border-radius:              4px;
                                border:                     0;
                                color:                      #d6e0ee;

                                //background-image:           linear-gradient(to bottom, #ffc99e, #ffba83);
                                margin-left:                5px;
                                box-shadow:                 2px 2px 6px #999;
                                //font-size:                  70%;
                                white-space:                nowrap;
                                text-decoration:            none;

                                .text {

                                    display:            inline-block;

                                    .text2 {
                                        display:            inline-block;
                                        padding-left:       8px;
                                        vertical-align:     top;
                                        padding-top:        7px;
                                    }

                                }

                            }

                            button:hover, .button:hover {
                                background-color:           #668ac1;
                                //background-image:           linear-gradient(to bottom, #ffe5d1, #fbd1af);
                                color:                      #e4eaf3;
                            }

    /*                        button i:first-child {
                                margin-right:       2px;
                                font-size:          75%;
                            }*/

                            button:active, .button:active {
                                box-shadow:                 0 1px 2px #999;
                                transform:                  translateY(4px);
                            }

                            button:focus, .button:focus {
                                outline:                    0px;
                            }

                            button:disabled, .button:disabled {
                                background-color:           #dfdfdf;
                                background-image:           none;
                                color:                      #bdbdbd;
                                box-shadow:                 none;
                            }

                        }


                        #saveButton {
                            margin-top:                 40px;
                        }

                    }

                    .tiles {

                        padding:    30px 30px 15px 25px;
                        height:     calc(100% - 45px);

                        #tiles {

                            display:            flex;
                            justify-content:    space-evenly;

                            .tile {

                                background-color:   #e2e2e2;
                                margin:             2vh .5vw;
                                border-radius:      6px;
                                width:              50%;
                                flex-grow:          1;
                                text-align:         center;
                                min-height:         30vh;
                                display:            flex;
                                justify-content:    center;
                                align-items:        center;
                                text-decoration:    none;

                                .content {

                                    .icon {
                                        display:            inline-block;
                                        font-size:          400%;
                                        padding:            10px;
                                        text-decoration:    none;
                                        color:              #555;
                                        border-radius:      8px;
                                    }

                                    .links {

                                        display:            inline-block;
                                        text-align:         left;

                                        .main {
                                            display:            block;
                                            font-size:          200%;
                                            text-decoration:    none;
                                            color:              #555;
                                            padding:            4px 8px;
                                            border-radius:      6px;
                                        }

                                        .group {

                                            display:            block;
                                            padding:            4px 6px 4px 10px;
                                            border-radius:      4px;

                                            a {
                                                color:              #555;
                                                text-decoration:    none;
                                            }

                                            a:hover {
                                                color:              #ff7300;
                                            }

                                        }
    /*
                                        .group:hover {
                                            background-color:   #ffe0caa3;
                                        }*/

                                    }

                                }

                            }

                            .tile:hover {

                                background-color:   #dadada;

                                .content {

                                    .icon {
                                        color:              #ff7300;
                                    }

                                    .links {
                                        .main {
                                            color:              #ff7300;
                                        }
                                    }

                                }

                            }

                        }

                    }

                    .fullScreenDialog {

                        display:            none;   // block
                        position:           fixed;
                        top:                0;
                        left:               0;
                        width:              100vw;
                        height:             100vh;
                        z-index:            10000;
                        text-align:         center;
                        background-color:   rgba(0, 0, 0, 0.6);

                        .box {

                            position:           relative;
                            display:            inline-table;
                            top:                20vh;
                            background-color:   #CCCCCC;
                            border-radius:      6px;
                            box-shadow:         2px 0 16px 0 rgba(0, 0, 0, 0.3);

                            #headline {
                                background-color:   #ff7300;
                                border-radius:      6px 6px 0px 0px;
                                padding:            10px 20px;
                                text-align:         center;
                                font-weight:        bold;
                            }

                            #body {

                                background-color:       #DDDDDD;
                                border-radius:          0px 0px 6px 6px;
                                padding:                10px 20px;

                                #confirmation {
                                    padding:                10px 10px 15px 10px;
                                }

                                #description {
                                    padding:                10px 10px 15px 10px;
                                }

                                #buttons {

                                    display:                flex;
                                    justify-content:        flex-end;

                                    button {
                                        border:                 0;
                                        border-radius:          4px;
                                        background-color:       orangered;
                                        margin-left:            5px;
                                        padding:                6px 16px 4px 16px;
                                    }

                                    button:hover {
                                        background-color:       #ffab67;
                                    }

                                }

                            }

                        }

                        .withErrors {

                            #headline {
                                background-color:   #f92222 !important;
                            }

                            #body {
                                #buttons {

                                    button {
                                        background-color:       #f92222 !important;
                                    }

                                    button:hover {
                                        background-color:       #f76a6a !important;
                                    }

                                }
                            }

                        }

                    }

                }

            }

        }

    }

}


#response {

     margin-top:         30px;

    .HTTP {
        padding-left:       14px;
        font-size:          88%;
        padding:            10px 15px 7px 15px;
        border-radius:      6px;
        display:            inline-block;
    }

    .OK {
        color:              #2db72d;
        border:             1px solid #91ca8a;
        background-color:   #b5e2af;
    }

    .Warning {
        color:              #83841d;
        border:             1px solid #d9da32;
        background-color:   #f2f372;
    }

    .Error {
        color:              #a21e1e;
        border:             1px solid #bd7070;
        background-color:   #f59f9f;
    }

}
